React Native学习笔记
1. react-native init AwesomeProject原因分析:react-native 0.55.6版本的问题,需要在init项目的时候指定老版本号,比如0.55.4解决方案:react-native init AwesomeProject -- version 0.55.42. react-native run-android Execution failed for task ‘:app:prepareSrolkReactNativeFilePickerUnspecifiedLibra...
2024-01-10React Native_环境编译
官方环境搭建一、两种方式运行程序1、指令运行:react-native run-android。运行结果如下图通过指令运行结果二:直接通过android studio运行二、遇到的问题1、unable to load script.make sure you're either running a metro server。如下图所示。标题异常图像a:通过指令启动时没有启动metro server解决方法:1:运行 adb rev...
2024-01-10React Native 架构一览
一.架构设计整体上分为三大块,Native、JavaScript 与 Bridge:Native 管理 UI 更新及交互,JavaScript 调用 Native 能力实现业务功能,Bridge 在二者之间传递消息。即:最上层提供类 React 支持,运行在JavaScriptCore提供的 JavaScript 运行时环境中,Bridge 层将 JavaScript 与 Native 世界连接起来。具体的,Shadow Tree 用来定...
2024-01-10react Native 第四天
1.props : 1.props 就是 Image 标签的src ,input 标签的text 用于组件初始化时需要的一些数据。2.使用props可以定制化插件,使插件可以复用3.props是从父元件传入2.理解state 1.有两种类型的数据可以控制组件,一个是props,props在组件的整个生命周期中是固定的2.如果要改变组件的数据需要改变,我们必须使...
2024-01-10React-Native踩坑记录二
1.Image组件的borderRadius画圆有平台兼容性问题,在IOS下会失效解决方法有几种(1)在外面包裹一层View,对View组件使用borderRadius就可以了,这是我的做法(2)在同一级属性块下加上overflow: 'hidden',我没试过,大家可以阅读下面的链接https://www.jianshu.com/p/d237f02584182.React-Native的渐变实现方案(1) 使用react-native-li...
2024-01-10React Native遇到的问题(一)
在我们创建React Native项目的时候发现gradle 版本相对比较低的,而且很多情况下直接编译会报错。而网上的很多解决方案就是gradle version改为1.2.3,于是,我有一个疑问,现在的gradle verion都已经3.0.1了,为什么还不升级呢?但是我发现我直接修改后,更是报各种错。 首先看下图这是我在网上搜到的一与...
2024-01-10React Native View组件实例
我们如何通过RN实现如图所示的效果:一:图形分析1.1:图形分为3列,我们设置flexDirection为“”row”,每个View独占1/3,flex设置为11.2:2,3列先把图形均分为上下两部分,填充内容1.3:给2,3列设置边框二:代码实现按照一的分析,实现逻辑如下:2.1:把布局分为3部分2.2:分别填充内容2.3:添加...
2024-01-10React Native获取手机的各种高度
一、窗口高度即图中黄色+蓝色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('window').height; 二、屏幕高度即图中黄色+蓝色+红色部分import { Dimensions } from "react-native";const deviceHeight = Dimensions.get('screen').height; 三、内容高度即图中蓝色部分import { Style...
2024-01-10React Native获取组件位置和大小
RN页面中定位或滚动操作时,需要获取元素的大小和位置信息,有几种常用的方法获取设备屏幕的宽高import {Dimensions} from 'react-native';var {height, width} = Dimensions.get('window');获取元素的大小和位置信息1. onLayout事件属性<View onLayout={this._onLayout}><View>_onLayout = (e) => { let {x,y,width,height} = e.nativeE...
2024-01-10使用 React Native 一年后的感受
当我在面试Discord的时候,技术主管Stanislav跟我说:React Native代表着未来。等它一发布,我们就会用它从零构建iOS应用。作为一名原生iOS开发者,基于先前使用PhoneGap的经验,我非常怀疑使用Web技术构建移动应用的这种方式。但是当我学习并使用React Native一段时间之后,我非常庆幸我们做了这个决定。...
2024-01-10React Native之FlexBox布局
参考原文链接:https://www.cnblogs.com/wujy/p/5841685.html弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性。Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至...
2024-01-10React Native验证码倒计时工具类分享
本文实例为大家分享了React Native验证码倒计时工具类的具体代码,供大家参考,具体内容如下因为以前直接用定时器,没去计算当前的时候,每次退出程序的时候,定时器一直不走,这个工具类简单的解决程序退出后台,定时器不走的bug,那么,直接上代码咯~~/** * Created by zhuang.haipeng on 2017.9.11 * * ...
2024-01-10React Native实现进度条弹框的示例代码
本文介绍了React Native实现进度条弹框,分享给大家我们在上传或者下载文件时候,希望有一个进度条弹框去提醒用户取当前正在上传或者下载,也允许用去取点击取消上传或者下载。首先实现进度条。import React, { PureComponent} from 'react';import { StyleSheet, View, Animated, Easing,} from 'react-native';class...
2024-01-10React Native安卓项目打包发布APK步骤
1、产生签名的key该过程会用到keytool,开发过安卓的都应该接触过该东西。详细请见密钥和证书管理工具。在项目的主目录(不是android文件夹)中执行:--生成签名key,注意记下你的密钥和存储密码,后面配置文件需要使用keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -val...
2024-01-10React-Native 之 Modal介绍与使用
前言遗漏的常用组件,刚发现官方有提供,这边也来介绍一下。如本文有错或理解偏差欢迎联系我,会尽快改正更新!如有什么问题,也可直接通过邮箱 277511806@qq.com 联系我。本章涉及资源下载:链接: https://pan.baidu.com/s/1o84o6JS 密码: htx6属性animationType(动画类型) PropTypes.oneOf(['none', 'slide', '...
2024-01-10React 之 setState
前言: state是React中非常重要的概念。React通过管理状态来实现对组件的管理,React通过this.state来访问state,又通过this.setState()来更新state,当this.setState()方法被调用时,React会重新调用render函数来重新渲染UI。一、setState异步更新 setState通过一个队列机制实现state更新。当执行setState时,会将需要更...
2024-01-10使用TypeScript创建React Native
⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html⒉安装React Native官方的脚手架工具npm install -g @react-native-community/cli⒊使用React Native脚手架初始化项目#默认是JavaScriptnpx react-native init ts_react_native#可以直接使用TypeScript初始化npx react-native init ts_r...
2024-01-10React DevTools
原文:https://reactjs.org/blog/2019/08/15/new-react-devtools.htmlWe are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!What’s changed?A lot has changed in version 4! At a high level, thi...
2024-01-10React-Native中props具体使用详解
props就是属性,是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。使用props通过上一个页面传递新建一个 PropsTest.js 文件exprot default class PropsTestextendesComponent{ render(){ return <Text>{this.props.name}</Text> }}在上一个页面中使用PropsTest组件import PropsTest from './PropsTest'<PropsTest name = '...
2024-01-10React Native Css简介及其与前端Css不同
Css简介作为一名前端工作者对css都是非常熟悉的,前端三要素为结构html表现css及行为js。结构负责整个页面的骨架,展现其主要内容,表现相当于外貌,使其更为丰满可观,而行为则负责人机交互以及一些复杂的动态效果。css遵循其语言规范进行工作,其语法结构也是非常的简单。本文不在此赘述css...
2024-01-10React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的。悲催。然后,最近项目也不是很紧了,所以抽空学习了H5。自学啃书还是很无趣的,虽然Head First Html5 Programming(中文版)这本书讲的很有意思,但是学习了大半本就想自己动手练练,所以...
2024-01-10携程火车票业务在 React Native 实践中踩过的坑
本文为携程技术中心投稿,版权归原作者所有,非经允许,请勿转载。 【作者简介】姚瑞琼,前端程序媛一枚。2014年毕业后加入携程火车票事业部,今年年初起至今,主要负责 React Native 方案在火车票业务线的实践,先后参与并负责汽车票 RN 独立版、携程 App 抢票 RN 版的开发迭代。 欢迎技术投稿、...
2024-01-102019年React Native入门:构建第一个应用程序
了解如何使用重要的基本概念构建您的第一个React Native应用程序以及从这里出发的去处! 信用: https : //unsplash.com/@nateggrant 我们生活在各种各样的移动设备中,这些设备主要由iOS和Android两个平台主导。 这是一场两匹马的比赛,我相信我们都可以对此表示同意。 但是,构建移动应用程序并非易事...
2024-01-10React-Native痛点解析之开发环境搭建及扩展
\React Native简直太火了,国内大公司都在争先恐后的尝鲜,让人难以相信这是诞生刚刚一年的开源项目。正因为它的年轻,在使用它进行开发时难免会遇到这样那样的坑,因此,我们邀请了《React Native入门与实战》的作...
2024-01-10如何在React Native中使用OpenCV进行图像处理
如果您曾经想过如何使用带有React Native的OpenCV处理图像,那么您来对地方了。 OpenCV与React Native一起使您能够在移动设备上处理图像 (最有可能要处理由设备相机拍摄的图像)。 这些的最大优点是: 易于实现。 易于使用。 Internet上有很多教程,以及OpenCV的可靠官方文档。 您的移动应用程序...
2024-01-10